<!-- 拆装箱页面 -->
<template>

	<view style="height: 100vh;width: 100vw;    background-color: #fff;">
		<newNavBar></newNavBar>
		<movable-area v-if="pageCode=='pipa'" :style="{ height: swiperHeight + 'px' }" style="width: 100%;">
			<swiper :style="{ height: swiperHeight + 'px' }" :current="currentIndex" :indicator-dots="pageCode=='pipa'?true:false"
				@change="changeSwiper">
				<swiper-item>
					<view style="background-color: #fff;">
						<scroll-view :style="{ height: swiperHeight + 'px' }" :scroll-top="scrollTop" scroll-y="true">
							<uni-forms ref="baseForm" :modelValue="baseFormData" class="content" label-position="top">
								<uni-forms-item v-if="pageCode=='pipa'" label="箱/托码号" name="boxCode" :labelWidth="120"
									required>
									<view class="form-item">
										<uni-easyinput type="text" v-model="boxCode" :focus="scanFouce"
											@focus="getFocus" placeholder="请输入箱/托码号"
											@confirm="scanInput('boxCode',$event)" />
										<uni-badge style="margin-left: 10px;" :customStyle="{background: '#42b983'}"
											absolute="rightTop" size="small">
											<uni-icons type="scan" size="27" style="margin-left: 6px;"
												@click="iconClick('boxCode',$event)" />
										</uni-badge>
									</view>
								</uni-forms-item>
								<uni-forms-item label="条码号" name="barCode" :labelWidth="labelWidth" required>
									<view class="form-item">
										<uni-easyinput type="text" v-model="barCode" :focus="scanFouce"
											@focus="getFocus" placeholder="请输入条码号"
											@confirm="scanInput('barCode',$event)" />
										<uni-badge style="margin-left: 10px;" :customStyle="{background: '#42b983'}"
											:text="scanNumber" absolute="rightTop" size="small">
											<uni-icons type="scan" size="27" style="margin-left: 6px;"
												@click="iconClick('barCode',$event)" />
										</uni-badge>
									</view>
								</uni-forms-item>
								<uni-forms-item>
									<uni-easyinput disabled autoHeight type="textarea" maxlength="-1" v-model="returnMessage" />
								</uni-forms-item>
							</uni-forms>
						</scroll-view>
					</view>
				</swiper-item>
				<!-- 列表信息 -->
				<swiper-item>
					<view id="listTop" :style="{background: 'rgba(255, 255, 255,'+opacityValue+')' }"
						class="listTop fixedTop">
						<view style="margin: 10px;">
							<uni-row v-for="(litem,index) in sumList" :key="index">
								<uni-col v-for="(citem,index) in litem.content" :key="index"
									:span="getListContent(litem.content)">
									<view style="padding: 5px;">
										<text>{{citem.title}}: </text>
										<text style="color: #ff0000;">{{citem.value}}</text>
									</view>
								</uni-col>
							</uni-row>
						</view>
						<view class="tab-bar-line"></view>
					</view>
					<scroll-view :style="{ height: swiperHeight + 'px' }" :scroll-top="scrollTop" scroll-y="true"
						@scroll="listScroll" @scrolltolower="scrolltolower">

						<view :style="{height: listSumHeight + 'px'}" class="listTop" style="background-color: #fff;">

						</view>

						<view v-for="(listItem,index) in listInfo" :index="index" :key="index" style="margin-top: 6px;">
							<view style="margin:0px 10px 6px 10px;">
								<uni-list-item :border="false" direction="column" style="border-radius: 7px;">
									<template v-slot:body>
										<view style="background-color: #ffffff;">
											<uni-row v-for="(litem,index) in listItem.list" :key="index">
												<uni-col v-for="(citem,index) in litem.content" :key="index"
													:span="getListContent(litem.content)">
													<view style="padding: 5px;">
														<text>{{citem.title}}: </text>
														<text style="color: #686765;">{{citem.value}}</text>
													</view>
												</uni-col>
											</uni-row>
										</view>
									</template>
								</uni-list-item>
							</view>
						</view>
						<uni-load-more v-if="loadMore" :status="loadStaus"></uni-load-more>

					</scroll-view>
				</swiper-item>

			</swiper>
			<!-- 实现悬浮按钮的移动 -->
			<movable-view v-if="pageCode=='pipa'" style="width: 80px;height: 80px;" :x="x+20" :y="y" direction="all" @change="onMoveChange">
				<view style="display: flex;justify-content: center;	background-color: #aaff7f; ">

					<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal"
						:vertical="vertical" direction="vertical" @trigger="fadTrigger" />

				</view>
			</movable-view>
		</movable-area>

		<view v-if="pageCode=='popa'" style="background-color: #fff;">
			<scroll-view :style="{ height: swiperHeight + 'px' }" :scroll-top="scrollTop" scroll-y="true">
				<uni-forms ref="baseForm" :modelValue="baseFormData" class="content" label-position="top">
					<uni-forms-item label="条码号" name="barCode" :labelWidth="labelWidth" required>
						<view class="form-item">
							<uni-easyinput type="text" v-model="barCode" :focus="scanFouce"
								@focus="getFocus" placeholder="请输入条码号"
								@confirm="scanInput('barCode',$event)" />
							<uni-badge style="margin-left: 10px;" :customStyle="{background: '#42b983'}"
								:text="scanNumber" absolute="rightTop" size="small">
								<uni-icons type="scan" size="27" style="margin-left: 6px;"
									@click="iconClick('barCode',$event)" />
							</uni-badge>
						</view>
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput autoHeight type="textarea" maxlength="-1" v-model="returnMessage" />
					</uni-forms-item>
				</uni-forms>
			</scroll-view>
		</view>

		<!-- 提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 uni-popup!"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<uni-calendar ref="happenDate" 
			:insert="false" :lunar="true" @confirm="confirm" />
	</view>
</template>

<script>
	import * as SystemJs from '../../common/system.js'
	import * as configJs from '../../common/config.js'
	export default {
		data() {
			return {
				pageCode: '',
				boxCode: '',
				barCode: '',
				returnMessage: '',
				mainColor: '',
				//滑动区域的高度(单位px)
				swiperHeight: 0,
				//当前索引
				currentIndex: 0,
				listSumHeight: 0, //list列表中汇总框的高度
				loadMore: false, //是否显示加载更多
				loadStaus: 'more',
				sumPages: 2, //列表总页数
				page: 1, //当前数据加载页
				opacityValue: '0', //列表顶部汇总页面的透明度
				scanNumber: 0, //扫描的条码数量
				listInfo: [], //列表信息
				sumList: [] ,//汇总信息
				//悬浮按钮进行移动
				x: 0,
				y: 0,
				//悬浮按钮的样式设置
				pattern: {
					color: '#000',
					backgroundColor: '#fff',
					selectedColor: '#000',
					buttonColor: configJs.baseColor.mainTitleColor,
					iconColor: '#fff'
				},
				//悬浮按钮中按钮的列表
				content: [
					{
						iconPath: '/static/save.png',
						selectedIconPath: '/static/save.png',
						text: '保存单据',
						code: 'save',
						active: false
					}
				]
			}
		},
		mounted() {
			this.listSumHeight = SystemJs.systemJs.getByIdHeight("listTop", this);
			// uni.hideKeyboard()
			this.$nextTick(() => {
				uni.hideKeyboard()
			})
		},
		onShow() {

		},
		onLoad(res) {
			this.pageCode = res.pageCode;
			SystemJs.systemJs.showTitleBar(res.pageName, true)
			//获取屏幕高度
			uni.getSystemInfo({
				success: (res) => {
					this.x = res.windowWidth*0.7;
					this.y = res.windowHeight*0.8
					this.windowWidth = res.windowWidth;
					var statusBar = res.statusBarHeight //状态栏高度
					//屏幕高度-状态栏高度-自定义导航栏高度
					this.swiperHeight = res.screenHeight - statusBar - 45
					// console.log('heightShow', this.swiperHeight)
				}
			})
		},
		methods: {
			//回车事件
			scanInput(text, e) {
				if (SystemJs.systemJs.IsEmpty(this.boxCode)) {
					SystemJs.ScanAudio.playError();
					//长震动
					uni.vibrateLong({
						success: () => {
							console.log('succ', 'success')
						}
					})
					return;
				}
				console.log("e:", e + text);
				SystemJs.ScanAudio.playRight();
				// this.scanNumber++;

				if (text == 'boxCode') {
					this.returnMessage = "扫描成功" + '\n' + this.boxCode;
				}
				if (text == 'barCode') {
					this.returnMessage = "扫描成功" + '\n' + this.barCode;
					this.barCode = "";
				}
				// uni.pageScrollTo({
				// 	scrollTop: 0,
				// 	duration: 0
				// })
			},
			//点击扫描按钮
			iconClick(text, type) {
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: (res) => {
						if (text == 'boxCode') {
							this.boxCode = res.result;
							console.log("e:", res.result);
							this.returnMessage = "扫描成功" + '\n' + this.boxCode;
						}
						if (text == 'barCode') {
							this.barCode = res.result;
							console.log("e:", res.result);
							this.returnMessage = "扫描成功" + '\n' + this.barCode;
							this.barCode = "";
						}
					},
					fail: (res) => {
						uni.showToast({
							title: JSON.stringify(res),
							icon: 'none'
						})
						console.log("e:", res);
					}
				})
			},
			//手动切换界面
			changeSwiper(e) {
				console.log('e', e)
				this.currentIndex = e.detail.current;
				if (this.currentIndex == 1) {

				}
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					// this.setSwiperHeight();
				});
			},
			//列表滑动时的监听事件
			listScroll(e) {
				// console.log(e);
				var listTop = e.detail.scrollTop; //距离顶部的长度
				if (listTop >= this.listSumHeight) {
					this.opacityValue = 1;
					this.showListSum = true;
				} else {
					//透明度
					this.opacityValue = (listTop / this.listSumHeight) * 1.7
					this.showListSum = false;
				}
			},
			scrolltolower(e) {
				console.log("滚动到底部");
				this.loadMore = true;
				if (this.page >= this.sumPages) {
					this.loadStaus = "noMore";
				} else {
					this.loadStaus = "loading";
					setTimeout(() => {
						var list = this.listInfo;
						this.listInfo.push.apply(this.listInfo, list);
						this.page++;
						// this.loadMore = false;
						this.loadStaus = "noMore";
					}, 2000);
				}
			},
			//获取列表内容中每行的个数
			getListContent(content) {
				var count = 0;
				if (content.length > 0) {
					count = 24 / content.length
				}
				return count;
			},
			/**
			 * 临时装箱/托操作
			 */
			tempInPacking(){
				var obj={};
				SystemJs.httpUnit.requestCryptoPost({
					url:'App/Packing',
					data:obj
				}).then((res)=>{
					
				}).catch((err)=>{
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			},
			/**
			 * 保存装箱/托操作
			 */
			saveInPacking(){
				var obj={};
				SystemJs.httpUnit.requestCryptoPost({
					url:'App/SavePacking',
					data:obj
				}).then((res)=>{
					
				}).catch((err)=>{
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			},
			/**
			 * 拆箱/托操作
			 */
			outPacking(){
				var obj={};
				obj.barCode=this.barCode;
				SystemJs.httpUnit.requestCryptoPost({
					url:'App/UnPacking',
					data:obj
				}).then((res)=>{
					if(res.Result){
						this.getBarCodeInfo(this.barCode,"拆箱/托成功");
					}else{
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
					}
				}).catch((err)=>{
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			},
			/**
			 * 获取条码信息
			 * @param {Object} barCode
			 */
			getBarCodeInfo(barCode, memo,isBox=false) {
				var obj = {};
				var url="";
				obj.boxCode = this.boxCode;
				obj.barCode = this.barCode;
				obj.baseCode = uni.getStorageSync('account');
				obj.inOutType = this.pageCode;
				if(isBox){
					url="App/GetPackingBox";
				}else{
					url="App/GetScanBarCode";
				}
				SystemJs.httpUnit.requestCryptoPost({
					url: url,
					data: obj
				}).then((res) => {
					if (res.Result) {
						var info = "";
						info = info + memo + '\n';
						var list = res.Data;
						if (list != undefined && list.length > 0) {
							var scanList = list[0].scanList;
							if (scanList != undefined && scanList.length > 0) {
								var head = scanList[0];
								var body = scanList[1];
								for (let key in head) {
									info = info + head[key] + ":" + body[key] + '\n'
								}
							}
						}
						this.returnMessage = info;
					} else {
						SystemJs.httpUnit.uniToast(JSON.stringify(res.Message))
					}
				}).catch((err) => {
					SystemJs.httpUnit.uniToast(JSON.stringify(err))
				})
			}
		}
	}
</script>

<style scoped>
	.form-item {
		display: flex;
		align-items: center;
	}

	.content {
		padding: 15px;
	}

	/* 修改form表单列样式 缩小间距*/
	.uni-forms-item {
		margin-bottom: 0px;
	}

	/* 我们需要在 style 标签上加 scoped，同时使用 deep 穿透  才能修改覆盖了子组件的样式，否则无法在父组件中修改子组件样式*/
	/deep/ .uni-forms-item.is-direction-top .uni-forms-item__label {
		padding: 0px;
	}
</style>
